<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no viewport-fit=cover" />
		<link rel="stylesheet" type="text/css" href="../../Common/css/ufun.css" />
		<script src="js/settings.js"></script>
		<script src="../../Common/js/jump.js"></script>
		<script src="../../Common/js/tools.js"></script>
		<script type="text/javascript" src="../../Common/js/lib/jquery-3.4.1.min.js"></script>
		<link rel="stylesheet" href="../../Common/css/lib/materialize.min.css">
		<script src="../../Common/js/lib/materialize.min.js"></script>
		<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
		<style type="text/css">
			html {
				background-color: var(--color-gray-white);
			}
			
			.list-container {
				margin: 5vw;
				border-radius: 5vw;
				overflow: hidden;
				box-shadow: 0 0 1px var(--color-gray-light);
			}
			
			.list-card {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 4.3vw;
				height: 20vw;
				padding: 0 6vw;
				border-top: 1px solid var(--color-gray-white);
				background-color: var(--color-white);
			}
			
			.list-card>.list-data {
				color: var(--color-gray-medium);
			}
			
			#HeadCard {
				height: 20vw;
			}

			#HeadImg {
				height: 15vw;
				width: 15vw;
				margin-right: -2vw;
				border: 1px solid var(--color-gray-medium);
				border-radius: 100%;
			}

			#HeadContent {
				height: 15vw;
				line-height: 15vw;
				width: 100%;
				display: flex;
				justify-content: space-between;
			}

			#ReLogin {
				width: 80vw;
				height: 11vw;
				background: var(--color-red);
				border-radius: 5vw;
				color: var(--color-white);
				font-size: 4.3vw;
				margin: 3vw auto;
			}

			#ReLogin div {
				display: flex;
				height: 100%;
				align-items: center;
				justify-content: center;
			}

			#ReLogin:active, .list-card:active {
				filter: brightness(90%);
			}
		</style>
	</head>

	<body>
		<!-- 标题栏 -->
		<header>
			<div id="Left" class="com-btn" onmouseup="ThisClose();">
				<i class="material-icons">keyboard_arrow_left</i>
			</div>
			<div id="Title">设置</div>
		</header>
		<!-- 列表内容 -->
		<div class="content">
			<ul class="list-container">
				<li class="list-card" id="HeadCard" onclick="ChangeHeadImg();">
					<div id="HeadContent">
						<div id="HeadText">头像</div>
						<img id="HeadImg" />
					</div>
				</li>

				<li class="list-card" onclick="JumpToSetNick(userInfo['uNick']);">
					<div>昵称</div>
					<div class="list-data" id="Nick">&nbsp;</div>
				</li>


				<!-- <li class="mui-table-view-cell waves-effect allwidth" onclick="JumpToSetPswd();">
					<div class="mui-navigate-right">
						<div class="cell-right">********</div>
						<div class="cell-left">密码</div>
					</div>
				</li> -->
				<li class="list-card" onclick="JumpToSetEdu();">
					<div>教育经历</div>
				</li>

				<li class="list-card" onclick="JumpToSetCV(userInfo['uCV']);">
					<div>个人简介</div>
				</li>

				<li class="list-card" onclick="JumpToAbout();">
					<div>关于我们</div>
				</li>

			</ul>
			<!-- <li class="mui-table-view-divider"></li> -->
			<!-- <ul class="mui-table-view">
				<li class="mui-table-view-cell waves-effect allwidth" onclick="JumpToSetMsg();">
					<div class="mui-navigate-right">
						<div class="cell-left">消息推送设置</div>
					</div>
				</li>
			</ul> -->
			<div id="ReLogin" onclick="ReLogin(true);">
				<div>退出登录</div>
			</div>
		</div>
		<script type="text/javascript">
			var userInfo;
			document.addEventListener('plusready', function() {
				GetStatusTop();
				DoWait();
				userInfo = JSON.parse(plus.storage.getItem("userInfo"));
				if (userInfo == null) {
					plus.nativeUI.alert("请稍后重试", "网络错误", function(e) {
						DontWait();
						plus.webview.currentWebview().close();
					});
					return;
				}
				drawPage();
				RefreshUserInfo(function() {
					drawPage();
				});
				// DoShow();
			});

			function refreshPage() {
				RefreshUserInfo(function() {
					drawPage();
				});
			};

			function drawPage() {
				userInfo = JSON.parse(plus.storage.getItem("userInfo"));
				if (!userInfo)
					return;
				document.getElementById("HeadImg").src = SERVER_LOC + userInfo["uHeadImgLoc"];
				document.getElementById("Nick").innerHTML = userInfo["uNick"];

				DoShow(plus.webview.currentWebview(), "slide-in-right", 250);
			}
		</script>
	</body>

</html>
